import React, { Component } from 'react'
import { Button, Table } from 'antd'
import { Redirect } from 'react-router-dom'
import ServiceModal from './ServiceModal'
import { formatDate } from '@/Utils/common'
import './servicedetails.less'

let interfaceColumns = [
  {
    title: 'function_name',
    dataIndex: 'function_name',
    key: 'function_name',
    width: '10%',
  },
  {
    title: 'paremters',
    dataIndex: 'paramters',
    key: 'paramters',
    width: '30%',
  },
  {
    title: 'feature_intro',
    dataIndex: 'feature_intro',
    key: 'feature_intro',
    width: '20%',
  },
  {
    title: 'remark',
    dataIndex: 'remark',
    key: 'remark',
    width: '40%',
  },

]
let operationColumns = [
  {
    title: 'function_name',
    dataIndex: 'function_name',
    key: 'function_name',
    width: '10%',
  },
  {
    title: 'paramters',
    dataIndex: 'paramters',
    key: 'paramters',
    width: '30%',
  },
  {
    title: 'called_account',
    dataIndex: 'called_account',
    key: 'called_account',
    width: '15%',
  },
  {
    title: 'method',
    dataIndex: 'method',
    key: 'method',
    width: '15%',
  },
  {
    title: 'feature_intro',
    dataIndex: 'intro',
    key: 'intro',
    width: '30%',
  },

]
class ServiceDetails extends Component {
  constructor(props) {
    super(props)
    this.state = {
      serviceIntroInfo: {
        id: '1',
        name: '数据存证服务',
        flag: 'asset',
        edition: 'v1.0',
        bottomLayer: 'Z-Ledger',
        language: 'golang',
        desc: '资产挂单交易合约（asset）能够应用在诸如二手商品交易、商品买卖、古董拍卖等应用场景中，实现基于任意类型通证（token）定价的资产挂单交易和买卖。',
        publisher: '纸贵科技',
        dateTime: '2020-04-23 14:34:24',
        updateTime: '2020-04-23 14:34:24',
      },
      interfaceInfoData: [
        {
          id: '1',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
        {
          id: '2',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
        {
          id: '3',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
        {
          id: '4',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
        {
          id: '5',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
      ],
      operationInfoData: [
        {
          id: '1',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
        {
          id: '2',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
        {
          id: '3',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
        {
          id: '4',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
        {
          id: '5',
          functionName: 'updateManagerDeduct',
          paremters: '[manager, deduct]',
          featureIntro: '修改管理员版权分成',
          remark: 'manager为管理员帐户地址，deduct为管理员分成比例（以下描述的所有分成比例均为百分号前部分，且为整数）',
        },
      ],
      showServiceModal: false,

    }
  }
    // 显示咨询服务modal
    handleModalVisible = (value) => {
      this.setState({
        showServiceModal: value,
      })
    }
    render() {
      const itemDetails = this.props.location.params && this.props.location.params.item
      const { serviceIntroInfo, interfaceInfoData, operationInfoData, showServiceModal } = this.state
      return (
        itemDetails
          ? <div className="service-details-wrap common">
            <div className="header">
              <div className="title">{itemDetails.name}</div>
              <div className="desc">{itemDetails.desc}</div>
              <Button
                className="btn com-btn-primary com-normal-btn"
                onClick={() => this.handleModalVisible(true)}
                disabled={!!itemDetails.buy}
              >
                {itemDetails.buy ? '已购买' : '咨询服务' }
              </Button>
              <div className="service_details_img"
              ></div>
            </div>
            <div className="service-intro service-title">
              <div className="title">
                <span className="title-text">服务介绍</span>
              </div>
              <div className="info" >
                <div className="info-item">
                  <label className="label">名称</label>
                  <span className="text">{itemDetails.name}</span>
                </div>
                <div className="info-item">
                  <label className="label">标识</label>
                  <span className="text">{itemDetails.identification}</span>
                </div>
                <div className="info-item">
                  <label className="label">版本</label>
                  <span className="text">{itemDetails.version}</span>
                </div>
                <div className="info-item">
                  <label className="label">支持底层</label>
                  <span className="text">{itemDetails.support_platform[0]}</span>
                </div>
                {/* 无合约时显示应用场景，不显示编写语言、接口描述，应用场景位于描述下方，与描述的距离等于版本与支持底层的距离 */}
                {
                  itemDetails.scene
                    ? <React.Fragment>
                      <div className="info-item">
                        <label className="label">编写语言</label>
                        <div className="text">{itemDetails.coding_lang}</div>
                      </div>
                      <div className="split-line"></div>
                      <div className="info-item">
                        <span className="label">描述</span>
                        <span className="text">{itemDetails.desc}</span>
                      </div>
                      <div className="info-item">
                        <span className="label">应用场景</span>
                        <span className="text">{itemDetails.scenario}</span>
                      </div>
                    </React.Fragment>
                    : <React.Fragement>
                      <div className="split-line"></div>
                      <div className="info-item">
                        <span className="label">应用场景</span>
                        <span className="text">{itemDetails.scenario}</span>
                      </div>
                    </React.Fragement>

                }
                <div className="split-line"></div>
                <div className="info-item">
                  <label className="label">发布者</label>
                  <span className="text">{itemDetails.publish_user}</span>
                </div>
                <div className="info-item">
                  <label className="label">发布时间</label>
                  <span className="text time">{formatDate(new Date(itemDetails.publish_at), 'yyyy-MM-dd hh:mm:ss')}</span>
                </div>
                <div className="info-item">
                  <label className="label">最近更新时间</label>
                  <span className="text time">{formatDate(new Date(itemDetails.updated_at), 'yyyy-MM-dd hh:mm:ss')}</span>
                </div>
              </div>
            </div>
            {
              itemDetails.scene
                ? <React.Fragment>
                  <div className="interface-intro service-title">
                    <div className="title">
                      <span className="title-text">接口描述</span>
                    </div>
                    <Table
                      className="interface-table common-table"
                      rowKey={(record, index) => index}
                      dataSource={itemDetails.api_desc}
                      columns={interfaceColumns}
                      pagination={false}
                    />
                  </div>
                  <div className="operation-intro service-title">
                    <div className="title">
                      <span className="title-text">操作步骤示例</span>
                    </div>
                    <Table
                      className="operation-table common-table"
                      rowKey={(record, index) => index}
                      dataSource={itemDetails.operation_steps}
                      columns={operationColumns}
                      pagination={false}
                    />
                  </div>
                </React.Fragment>
                : null

            }

            <ServiceModal visible={showServiceModal} handleModalVisible={this.handleModalVisible}/>
          </div>
          : <Redirect to={{ pathname: '/dashboard/applicationService' }} />
      )
    }
}

export default ServiceDetails
